<template>
<div class='newElButton-container' @click.stop='handleClick'>
  <div class='newElButton-wrapper'
       :class='{
         shadow: showShadow,
         disabled: disabled,
         default: btnType === "default",
         plain: btnType === "plain",
         cancel: btnType === "cancel",
         warning: btnType === "warning",
         ordinary: btnType === "ordinary",
         delete: btnType === "delete"
       }'
       :style='{
         width: width,
         height: height,
         padding: `0 ${horizontalPadding}`,
         borderRadius: borderRadius,
         backgroundColor: backgroundColor,
         fontSize: fontSize,
         borderColor: borderColor,
         color: color
       }'>
    <slot></slot>
  </div>
</div>
</template>

<script>
export default {
  data () {
    return {}
  },
  props: {
    // 是否可点击
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否显示阴影
    showShadow: {
      type: Boolean,
      default: false
    },
    // 整体宽度
    width: {
      type: String,
      default: ''
    },
    // 整体高度
    height: {
      type: String,
      default: '32px'
    },
    // 整体风格, 可选值： default, cancel, plain, warning, ordinary, delete
    btnType: {
      type: String,
      default: 'default'
    },
    // 控制左右padding值
    horizontalPadding: {
      type: String,
      default: '16px'
    },
    borderRadius: {
      type: String,
      default: '6px'
    },
    backgroundColor: {
      type: String,
      default: ''
    },
    fontSize: {
      type: String,
      default: '12px'
    },
    borderColor: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClick () {
      if (!this.disabled) {
        this.$emit('handleClick')
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.newElButton-container
  display inline-block
  outline none
  .newElButton-wrapper
    display flex
    align-items center
    justify-content center
    box-sizing border-box
    cursor pointer
    letter-spacing 1px
    transition all ease .2s
    user-select none
    &.shadow
      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.13)
    &.disabled
      cursor not-allowed
      &:hover
        &.default
          background-color rgba(76,132,255, 0.6)
        &.plain
          background-color #ffffff
        &.cancel
          color #22242F
          background-color #ffffff
          border: 1px solid #DDDDDD;
    &.default
      background-color #4C84FF
      color #fff
      &:hover
        background-color rgba(76,132,255, 0.7)
      &.disabled
        background-color rgba(76,132,255, 0.6)
    &.plain
      background-color #ffffff
      color #4C84FF
      border: 1px solid #4C84FF;
      &:hover
        background-color #ecf5ff
        // background-color #4C84FF
        // color #fff
    &.cancel
      background-color #ffffff
      color #22242F
      border: 1px solid #e9eaed;
      &:hover
        color #4C84FF
        border: 1px solid #4C84FF;
    &.warning
      background-color rgba(255, 151, 76, 1)
      color #fff
      &:hover
        background-color rgba(255, 151, 76, 0.7)
    &.ordinary
      background-color: rgba(246, 246, 249, 1)
      border: 1px solid #EAEDF7;
      color: #5E5E66;
      &:hover
        background-color rgba(246, 246, 249, 0.7)
    &.delete
      background-color: #FFFFFF;
      border: 1px solid #e9eaed;
      color #5E5E66
</style>
